<template>
    <view class="record">
        <view class="" style="display: flex;">
            <view class="day-type flex-box" >
                <view class="day-nav flex-box " >
                    <picker @change="bindPickerStartDay" mode="date">
                        <view class="flex-box">
                            <view class="icon calender"></view>
                            <text class="fx1" style="font-size:25rpx">{{ time.start }}</text>
                        </view>
                    </picker>
                    <text>至</text>
                    <picker @change="bindPickerEndDay" mode="date">
                        <view class="flex-box items">
                            <text class="fx1" style="font-size:25rpx">{{ time.end }}</text>
                        </view>
                    </picker>
                </view>
                <!-- 记录/统计 -->
                <view class="record-item">
                    <view class="record-item-in" v-for="(item,index) in recordType.content" :key="index" @tap="bindRecord(index)" :class="{act:index === recordType.current}">
                        <view :class="{act:index === recordType.current}">{{item.des}}</view>
                    </view>
                </view>
                <!-- <view class="type-nav flex-box items">
                    <view class="item" v-for="(item, index) in tableType.t" :key="index" @tap="changeType(index)" :class="{ act: index == tableType.current }">
                        <text>{{ item.des }}</text>
                    </view>
                </view> -->
            </view>
        </view>
        <!-- 点击记录 -->
        <view class="table-box" v-show="current === 0">
            <view class="table-box">
                <scroll-view scroll-x="true" class="scroll-view" @scroll="scroll">
                    <view class="tr table-box" style="background:#e8f0f4">
                        <view class="td">序号</view>
                        <view class="td">车名</view>
                        <view class="td">
                            <picker @change="bindPickerChange" :value="array.index" :range="array.list">
                                品名
                                <uni-icon type="arrowdown"></uni-icon>
                            </picker>
                        </view>
                        <view class="td ">数量</view>
                        <view class="td">检测人</view>
                        <view class="td">检验时间</view>
                        <view class="td ">登记人</view>
                        <view class="td" style="width:300rpx;">登记时间</view>
                    </view>
                    <!-- 滚动固定表头 -->

                    <view class="tr table-box navTop" v-show="navTop" style="background:#e8f0f4">
                        <scroll-view scroll-x="true" class="scroll-view" :scroll-left="scroll_left" >
                            <view class="td">序号</view>
                            <view class="td">车名</view>
                            <view class="td">
                                <picker @change="bindPickerChange" :value="array.index" :range="array.list">
                                    品名
                                    <uni-icon type="arrowdown"></uni-icon>
                                </picker>
                            </view>
                            <view class="td ">数量</view>
                            <view class="td">检测人</view>
                            <view class="td">检验时间</view>
                            <view class="td ">登记人</view>
                            <view class="td" style="width:300rpx;">登记时间</view>
                        </scroll-view>
                    </view>

                    <view class="tr  table-box" v-for="(item, index) in table" :key="index">
                        <view class="td ">{{ index+1}}</view>
                        <view class="td ">{{ item.car_num }}</view>
                        <view class="td ">{{ item.goods_name }}</view>
                        <view class="td ">{{ item.number }}</view>
                        <view class="td ">{{ item.check_name }}</view>
                        <view class="td ">{{ item.check_time }}</view>
                        <view class="td ">{{ item.note_taker}}</view>
                        <view class="td " style="width:300rpx;">{{ item.note_taker_time }}</view>
                    </view>
                </scroll-view>
            </view>
        </view>

        <!-- 点击统计 -->
        <view class="table-box" v-show="current === 1">

            <view class="tr ">
                <view class="td">序号</view>
                <view class="td">
                    <picker @change="bindPickerChange1" :value="array1.index" :range="array1.list">
                        品名
                        <uni-icon type="arrowdown"></uni-icon>
                    </picker>
                </view>
                <view class="td">数量</view>
            </view>
            <view class="tr navTop" v-show="navTop">
                <view class="td">序号</view>
                <view class="td">
                    <picker @change="bindPickerChange1" :value="array1.index" :range="array1.list">
                        品名
                        <uni-icon type="arrowdown"></uni-icon>
                    </picker>
                </view>
                <view class="td">数量</view>
            </view>

            <view class="tr " v-for="(item, index) in table1" :key="index">
                <view class="td">{{ index+1 }}</view>
                <view class="td">{{ item.goods_name }}</view>
                <view class="td">{{ item.number }}</view>

            </view>
        </view>
    </view>
</template>

<script>
import {
    uniIcon,
    uniPopup
} from "@dcloudio/uni-ui";

import {
    request
} from "../../../comon/js/request.js"

export default {
    data() {
        return {
            scroll_left: 0,
            scroll_width: '',
            navTop: false,
            maxPage: 0,
            formData: {
                page: 1
            },
            current: 0,
            recordType: {
                current: 0,
                content: [{
                        des: "记录"
                    },
                    {
                        des: "统计"
                    }
                ]
            },
            popup: false,
            array: {
                index: 0,
                list: [],
            },
            array1: {
                list: [],
                index: 0
            },
            time: {
                start: "请选择开始时间",
                end: "请选择结束时间"
            },
            table: [],
            table1: []
        };
    },
    onReachBottom() {
        console.log(this.formData.page, this.maxPage);
        if (this.formData.page < this.maxPage) {
            this.upInit();
        } else {
            return null;
        }
    },
    onPageScroll(e) {
        // console.log(e.scrollTop)
        if (e.scrollTop >= 100) {
            if (!this.navTop) {
                this.navTop = true
            }
        } else {
            if (this.navTop) {
                this.navTop = false
            }
        }
    },
    methods: {
        scroll(e) {
            console.log(e)
            this.scroll_left = e.detail.scrollLeft
            this.scroll_width = e.detail.scrollWidth

        },
        upInit() {
            this.formData.page++;
            this.getLists()
        },
        getLists() {
            request({
                url: "v1/stock/list",
                method: "GET",
                data: {
                    page: this.formData.page
                }
            }).then(res => {
                console.log(res);
                this.table = this.table.concat(res.data.result.list.data);
                console.log(this.table)
            });
        },
        // 公用时间
        screenTime() {
            request({
                url: "v1/stock/checkStock",
                data: this.formData
            }).then(res => {
                console.log(res)
                this.table = res.data.result.list.data
                this.table1 = res.data.result.list.data

            })
        },
        bindPickerStartDay(e) {
            this.time.start = e.detail.value
            this.formData = {
                record_time_start: this.time.start,
                record_time_end: this.time.end
            }
            this.screenTime()
        },
        bindPickerEndDay(e) {
            this.time.end = e.detail.value
            this.formData = {
                record_time_start: this.time.start,
                record_time_end: this.time.end
            }
            this.screenTime()
        },
        bindPickerChange(e) {
            if (this.time.start == "请选择开始时间" || this.time.end == "请选择结束时间") {
                this.formData = {
                    goods_name: this.array.list[e.target.value]
                }
                this.screenTime()
            } else {
                this.formData = {
                    goods_name: this.array.list[e.target.value],
                    record_time_start: this.time.start,
                    record_time_end: this.time.end
                }
                this.screenTime()
            }
        },
        bindPickerChange1(e) {
            request({
                url: "v1/stock/checkStock",
                data: {
                    goods_name: this.array1.list[e.target.value]
                }
            }).then(res => {
                this.table1 = res.data.result.list.data
            })
        },
        bindRecord(index) {
            this.recordType.current = index;
            this.current = index;
        },
        getMsg() {
            request({
                url: "v1/stock/checkStock",
                method: "GET",
            }).then(res => {
                console.log(res)
                this.maxPage = res.data.result.list.last_page
                this.table = res.data.result.list.data
                this.table1 = res.data.result.list.data
                console.log(this.table, "-----------------")
                this.array.list = res.data.result.list.data.map(item => {
                    return item.goods_name
                })
                let arrayList = this.array.list

                function newArr(arrayList) {
                    return Array.from(new Set(arrayList))
                }
                this.array.list = newArr(arrayList)
                this.array1.list = newArr(arrayList)
                // this.table1 = res.data.result.list.data

            })
        },
        // 上拉加载更多
        getMore() {
            // let addPage = this.page++
            // this.getMsg()
        }
    },
    components: {
        uniIcon,
        uniPopup
    },
    onShow() {
        this.getMsg()
    },
};
</script>

<style lang="scss">
.default{
    display: flex;
    justify-content: center;
}
.navTop {
    position: fixed;
    top: 0rpx;
    z-index: 99;
    width: 750rpx;
    background: #e4ecf3;
}

.scroll-view {
    white-space: nowrap;
    width: 100%;
}

.table-box {
    .tt {
        background: $color-theme-blue;
    }

    .tr {
        box-sizing: border-box;
        padding: 0;
    }

    .td {
        background: inherit;
        display: inline-block;
        width: 25%;
        padding: 25rpx 0;
        box-sizing: border-box;
    }
}

.table-tt {
    display: flex;
    justify-content: space-around;
}

.scroll-view {
    white-space: nowrap;
    width: 100%;
}

.trHead {
    flex: 1;
}

.trHead3 {
    width: 100rpx;
}

.record {
    .t {}

    .td1 {
        // font-size: 23rpx;
        // display: flex;
        // justify-content: space-around
    }

    .td {
        display: inline-block;
        width: 230rpx;
        // width: 100rpx;
        padding: 25rpx 0;
    }

    .td9 {
        width: 200rpx;
    }

    .td2 {
        justify-content: center;
        flex: 1;
        display: flex;
    }

    .td3 {
        justify-content: center;

        flex: 1;

        display: flex;
    }

    .record-item {
        display: flex;
        margin-left: 24rpx;
        margin-top: 34rpx;

        .record-item-in {
            justify-content: center;
            align-items: center;
            font-size: 24rpx;
            height: 46rpx;
            width: 100rpx;
            display: flex;
            background: #f0f4f8;
        }

        .act {
            color: #fff;
            background-color: #0062a0;
        }
    }
}

.day-nav {
    margin: 30rpx 0;
    background: #f0f4f8;
    height: 55rpx;
    padding-top: 10rpx;
    padding-left: 25rpx;
    padding-right: 25rpx;
    border-radius: 5rpx;
    box-sizing: border-box;
    border: 1rpx solid $border-grey;

    text {
        margin: 0 $spacing-s;
        font-size: $fs-base-x;
    }
}
</style>
